/*  
intersectionObserver : 创建一个监听器，监听一个或多个dom元素，监听这些dom元素，和可视窗口的“交叉”状态发送改变，也可以获取此时元素和可视窗口的交叉信息值！
*/

const picBox = document.querySelector('.pic-box'),
        img = picBox.querySelector('img');

    // 实现懒加载
    const lazyImage =  function () {
         let trueImg = img.getAttribute('data-image'),  //存放图片地址
          tempImg  = new Image;
          tempImg.src = trueImg;
          tempImg.onload = () => {
            img.src = trueImg;
            img.style.opacity = 1
          }
    }
    
    // 创建监听器  监听元素是否1出现在可视窗口
    let ob = new IntersectionObserver( (changes) => {
        let item = changes[0];
        if (item.isIntersecting){
            lazyImage();
            ob.unobserve(item.target) // 移除监听
        }
    },{threshold:[1] })
    ob.observe(picBox)
/*        
// intersectionObserver 中传递callback函数执行
//  + 开始监听dom元素成功，会执行一次！
//  + 监听的dom元素，只有和可视窗口的交叉状态改变
//  + 默认：一露头和完全消失触发  =>   {threshold : [0] }
//  完全出现再触发 => {threshold : [1] }
const ob = new IntersectionObserver((changes)=>{
    //changes数组，包含所有监听dom元素的交叉信息
    // + boundingClientRect
    // + isIntersecting 是否出现在可视窗口中
    // + target 获取监听的dom元素
    let item = changes[0];
    console.log(item);
},
{threshold : [1] }
);
ob.observe(picBox); */